<template>
  <div class="main-container">
    <el-tabs
      class="tabs-container"
      v-model="menuStore.editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
      @tab-click="selectedTabHandle"
      :class="menuStore.isCollapse ? 'tabs-width2' : 'tabs-width1'"
    >
      <el-tab-pane
        v-for="item in menuStore.editableTabs"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      >
      </el-tab-pane>
    </el-tabs>
    <router-view class="main-view" />
  </div>
</template>

<script setup lang="ts">
import { useMenuStore } from "../../store/index";

const menuStore = useMenuStore();

// tabs, 选中tab
const selectedTabHandle = (tab) => {
  tab = menuStore.editableTabs.filter((item) => item.name === tab.name);
  if (tab.length >= 1) {
    //切换标签页时同步更新高亮菜单
    menuStore.$patch((state) => {
      state.activeIndex = tab[0].id.toString();
      state.editableTabsValue = tab[0].id.toString();
    });
    // router.push(tab[0].path);
  }
};
//删除标签页
const removeTab = (targetName) => {
  let tabs = menuStore.editableTabs;
  let activeName = menuStore.editableTabsValue;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }
  //当前标签序号
  menuStore.$patch((state) => {
    state.editableTabsValue = activeName;
    state.editableTabs = tabs.filter((tab) => tab.name !== targetName);
  });
  //标签
  var tab2 = menuStore.editableTabs.filter(
    (item) => item.name === menuStore.editableTabsValue
  );
  if (tab2.length >= 1) {
    //切换标签页时同步更新高亮菜单
    menuStore.$patch((state) => {
      state.activeIndex = tab2[0].id.toString();
    });
    //跳转
    //  router.push(tab[0].path);
  }
};
</script>

<style lang="less">
.main-container {
  .tabs-container {
    margin-top: 2px;
  }
  .main-view {
    margin: 0px 5px;
  }
}
</style>
